<template>
  <div class="container mt-3">
    <input
      type="text"
      class="form-control"
      v-model="iptValue"
      placeholder="请输入价格"
      @keyup.enter="handle"
    />
    <div class="mt-3">
      <button class="btn btn-outline-success w-25" @click="handle">搜素</button>
      <button class="btn btn-outline-danger w-25 ms-5" @click="xin">重置</button>
    </div>

    <div v-if="flag" class="mt-3">
      <Son :plist="arr"></Son>
    </div>

    <div v-else="!flag">暂无数据</div>
  </div>
</template>

<script setup>
/* 
作业:
查询以下票价信息，

要求:
1、 使用父子组件完成，父组件中放置 搜索框、搜索按钮、重置按钮。子组件展示查询结果列表。
2、 使用defineProps 函数传递属性
3、 将arr数组中大于等于输入票价价格信息通过无序列表展示出来。如果输入没有匹配的价格则显示"暂无数据"。
查询事件通过按回车件实现
4、 组件初始之后在无序列表中展示所有数，点击 重置按钮 恢复所有数据，在无序列表中展示所有数

*/
import { ref } from "vue";
import Son from "./Son.vue";

let arr = ref([
  {
    pid: "w-001",
    ptime: "2022-01-10 22:00:00",
    paddr: "长沙 -- 北京",
    price: 1000,
  },
  {
    pid: "w-002",
    ptime: "2022-01-10 08:00:00",
    paddr: "长沙 -- 广州",
    price: 800,
  },
  {
    pid: "w-003",
    ptime: "2022-01-10 14:00:00",
    paddr: "长沙 -- 云南",
    price: 600,
  },
  {
    pid: "w-004",
    ptime: "2022-01-10 14:00:00",
    paddr: "长沙 -- 云南",
    price: 6,
  },
  {
    pid: "w-005",
    ptime: "2022-01-10 14:00:00",
    paddr: "长沙 -- 上海",
    price: 1200,
  },
  {
    pid: "w-006",
    ptime: "2022-01-10 14:00:00",
    paddr: "长沙 -- 北京",
    price: 6000,
  },
]);
// 新数组
let arr1;
arr1 = arr.value;
// input 框数据
let iptValue = ref();

// 判断是否显示
let flag = ref(true);

// 搜索按钮
const handle = () => {
  if (arr.value.filter((item) => item.price >= iptValue.value).length > 0) {
    arr.value = arr.value.filter((item) => item.price >= iptValue.value);
  } else {
    flag.value = false;
  }
};

// 重置按钮
const xin = () => {
  arr.value = arr1;
  flag.value = true;
};
</script>

<style scoped></style>
